/**
 * Copyright (c) 2020 kedacom
 * OpenATC is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 * http://license.coscl.org.cn/MulanPSL2
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 **/
<template>
  <div class="stage-table" ref="stage-table">
    <el-table
        :data="stageList"
        style="width: 100%"
        :max-height="tableHeight"
        v-loading.body="listLoading"
        id="footerBtn">
        <el-table-column
        prop="stageno"
        :label="$t('edge.stagetable.stageindex')"
        align="center">
        </el-table-column>
        <el-table-column
        prop="stagename"
        :label="$t('edge.stagetable.stagename')"
        align="center">
        </el-table-column>
        <!-- <el-table-column
        prop="attribute"
        :label="$t('edge.stagetable.feature')"
        align="center">
        </el-table-column> -->
        <el-table-column
        prop="green"
        :label="$t('edge.stagetable.greentime')"
        align="center">
        </el-table-column>
        <el-table-column
        prop="redyellow"
        :label="$t('edge.stagetable.redyellowtime')"
        align="center">
        </el-table-column>
        <el-table-column
        prop="yellow"
        :label="$t('edge.stagetable.yellowtime')"
        align="center">
        </el-table-column>
        <el-table-column
        prop="allred"
        :label="$t('edge.stagetable.allredtime')"
        align="center">
        </el-table-column>
        <el-table-column
        prop="phasenolist"
        :label="$t('edge.stagetable.phasenumberlist')"
        :formatter="phaseNumberListFormat"
        align="center">
        </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'stagetable',
  data () {
    return {
      tableHeight: 700,
      listLoading: false
    }
  },
  computed: {
    ...mapState({
      stageList: state => state.globalParam.tscParam.stageparamList
    })
  },
  mounted: function () {
    var _this = this
    _this.$nextTick(function () {
      _this.tableHeight = _this.$refs['stage-table'].offsetHeight - 40
      window.onresize = function () {
        _this.tableHeight = _this.$refs['stage-table'].offsetHeight - 40
      }
    })
  },
  created () {},
  methods: {
    phaseNumberListFormat (row, column) {
      return row.phasenolist.join(', ')
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .stage-table {
  padding: 20PX;
  height: 100%;
}
</style>
